<template>
	<view class="card">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				会员卡发放
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}"></view>
		<view class="mendian">
			<view class="heads clearfix">
				<view class="left fl">
					<image :src="baseUrl + '/wximage/hktubiao.png'"></image>
					<view class="name">适应宝类型</view>
				</view>
				<view class="right fr">
					<u-checkbox-group @change="checkboxChange">
						<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList1" :key="index" :name="item.value">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="form">
			<view class="content clearfix">
				<view class="name fl">用户ID或手机号</view>
				<view class="inp fr">
					<input type="text" placeholder="请输入用户ID或手机号" v-model="users_id" />
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">适用范围<text>*</text></view>
				<view class="xuanze fr" @click="topage('/subpackageA/business/index?attr=change')">
					{{fwlabel}}
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">会员卡类型<text>*</text></view>
				<view class="xuanze fr" @click="lxstatus = true">
					{{lxlabel}}
				</view>
				<u-select v-model="lxstatus" :list="lxlist" @confirm="confirmlx"></u-select>
			</view>
			<view class="content clearfix">
				<view class="name fl">减免类型<text>*</text></view>
				<view class="xuanze fr" @click="jmstatus = true">
					{{jmlabel}}
				</view>
				<u-select v-model="jmstatus" :list="jmlist" @confirm="confirmjm"></u-select>
			</view>
			<view class="content clearfix" v-if="jmvalue == 1">
				<view class="name fl">单次减免时长<text>*</text></view>
				<view class="xuanze fr" @click="scstatus = true">
					{{sclabel}}
				</view>
				<u-select v-model="scstatus" :list="sclist" @confirm="confirmsc"></u-select>
			</view>
			<view class="content clearfix" v-if="jmvalue == 2">
				<view class="name fl">单次减免金额<text>*</text></view>
				<view class="inp fr">
					<input type="text" placeholder="请输入单次减免金额(元)" v-model="jine" />
				</view>
			</view>
			<view class="content contentlast clearfix">
				<view class="name fl">单日可用次数<text>*</text></view>
				<view class="xuanze fr" @click="csstatus = true">
					{{cslabel}}
				</view>
				<u-select v-model="csstatus" :list="cslist" @confirm="confirmcs"></u-select>
			</view>
		</view>
		<view class="footer">
			<view class="submit" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				users_id: '',
				jine: '',
				fwlabel: '请选择',
				bussiness_id: '',
				bussiness_name: '',
				
				lxstatus: false,
				lxlist: [],
				lxvalue: 0,
				lxlabel: '请选择',
				
				jmstatus: false,
				jmlist: [{
					value: 1,
					label: '时长'
				},{
					value: 2,
					label: '金额'
				}],
				jmvalue: 0,
				jmlabel: '请选择',
				
				scstatus: false,
				sclist: [{
					value: 1,
					label: '1小时'
				},{
					value: 2,
					label: '2小时'
				},{
					value: 3,
					label: '3小时'
				},{
					value: 5,
					label: '5小时'
				},{
					value: 7,
					label: '7小时'
				},{
					value: 9,
					label: '9小时'
				},{
					value: 24,
					label: '24小时'
				}],
				scvalue: 0,
				sclabel: '请选择',
				
				csstatus: false,
				cslist: [{
					value: 1,
					label: '1次'
				},{
					value: 2,
					label: '2次'
				},{
					value: 3,
					label: '3次'
				},{
					value: 5,
					label: '5次'
				},{
					value: 9999,
					label: '无限次'
				}],
				csvalue: 0,
				cslabel: '请选择',

				checkboxValue1: ["1","2"],
				checkboxList1: [{
					name: '普通宝',
					checked: true,
					value: "1",
				}, {
					name: '快充宝',
					checked: true,
					value: "2",
				}],
			}
		},
		onLoad() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			this.request({
				url: '/xcx/membershipcardList',
				data: {},
				method: "POST"
			}).then(res => {
				if (res.data.code == 200) {
					let list = res.data.data;
					for(let i=0;i<list.length;i++){
						this.lxlist.push({
							value: list[i].id,
							label: list[i].title,
						})
					}
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
		},
		onShow() {
			let that = this;
			uni.getStorage({
				key: 'cardAttr',
				success: function (res) {
					that.bussiness_id = res.data.bussiness_id;
					that.bussiness_name = res.data.bussiness_name;
					that.fwlabel = res.data.bussiness_name;
					
					uni.removeStorage({
						key: 'cardAttr'
					})
				}
			})
		},
		methods: {
			submit() {
				let users_id = this.users_id;
				let bussiness_id = this.bussiness_id;
				let charge_leixing = JSON.stringify(this.checkboxValue1);
				let membershipcard_id = this.lxvalue;
				let jm_leixing = this.jmvalue;
				let jine = this.jine;
				let shichang = this.scvalue;
				let cishu = this.csvalue;
				
				if(bussiness_id == '' || charge_leixing == '' || membershipcard_id == '' || jm_leixing == '' || cishu == ''){
					uni.showToast({
						title: '信息不能为空',
						icon: 'none'
					})
					return false;
				}
				if(jm_leixing == 1 && shichang == ''){
					uni.showToast({
						title: '信息不能为空',
						icon: 'none'
					})
					return false;
				}
				if(jm_leixing == 2 && jine == ''){
					uni.showToast({
						title: '信息不能为空',
						icon: 'none'
					})
					return false;
				}
				
				this.request({
					url: '/xcx/membershipcardlingqu',
					data: {
						users_id:users_id,
						czz_id: uni.getStorageSync('agent_id'),
						bussiness_id: bussiness_id,
						bussiness_name: this.bussiness_name,
						charge_leixing: charge_leixing,
						membershipcard_id: membershipcard_id,
						jm_leixing: jm_leixing,
						shichang: shichang,
						jine: jine,
						cishu: cishu,
					},
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '发放成功',
							icon: 'none'
						})
				
						setTimeout(function() {
							uni.navigateBack()
						}, 2000)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			confirmlx(e) {
				this.lxvalue = e[0].value;
				this.lxlabel = e[0].label;
			},
			confirmjm(e) {
				this.jmvalue = e[0].value;
				this.jmlabel = e[0].label;
			},
			confirmsc(e) {
				this.scvalue = e[0].value;
				this.sclabel = e[0].label;
			},
			confirmcs(e) {
				this.csvalue = e[0].value;
				this.cslabel = e[0].label;
			},
			checkboxChange(e) {
				this.checkboxValue1 = e;
			},
			topage(url){
				uni.navigateTo({
					url
				})
			},
			fanhui() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: #f9f9ff;
		overflow-y: scroll;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				text {
					font-size: 24rpx;
				}

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
		}

		.mendian {
			width: 94%;
			margin: 0 auto;
			z-index: 70;
			margin-top: -280rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;
			padding: 0 20rpx;

			.heads {
				width: 100%;
				height: 92rpx;
				line-height: 92rpx;

				.left {

					image {
						float: left;
						width: 40rpx;
						height: 40rpx;
						margin-top: 26rpx;
					}

					.name {
						font-size: 28rpx;
						color: #333333;
						float: left;
					}
				}

				.right {
					padding: 20rpx 0;
				}
			}
		}

		.form {
			width: 94%;
			margin: 0 auto;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx;
			box-shadow: rgba(223, 230, 255, 0.67) 0px 0px 6px;

			.content {
				height: 92rpx;
				line-height: 92rpx;
				border-bottom: 1rpx solid #D8D8D8;

				.name {
					font-size: 28rpx;
					color: #333333;
					width: 40%;

					text {
						color: #FA5E5C;
					}
				}

				.inp {
					width: 60%;
					text-align: right;

					input {
						font-size: 28rpx;
						color: #999999;
						height: 92rpx;
						line-height: 92rpx;
					}
				}

				.xuanze {
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					color: #368BF8;
				}
			}

			.contentlast {
				border: none;
			}
		}

		.footer {
			width: 100%;
			margin: 0 auto 40rpx;
			margin-top: 60rpx;
			height: 72rpx;
			text-align: center;

			.submit {
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(90deg, #65bdfc, #398ef8);
				margin-left: 248rpx;
				border-radius: 36rpx;
				border-top-left-radius: 0;
				border-bottom-left-radius: 42rpx;
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}
	}
</style>